<template>
    <div  class="modal-backdrop"></div>
    <div class="dialog-overlay">
        <div class="dialog-header">
          <h3>选择迁移类型</h3>
          <button class="close-button" @click="$emit('close')">×</button>
        </div>
        <div class="dialog-body">
            <label class="check">
            <input type="checkbox" v-model="intraDomainMigration"> 域内迁移
            </label>
            <label class="check">
            <input type="checkbox" v-model="crossDomainMigration"> 跨域迁移
            </label>
            <div class="sel">
            <!-- <span>目标集群:</span>
            <select v-model="targetCluster" class="selector">
                <option value="cloud_cluster">云集群</option>
                <option value="device_cluster">端集群</option>
                <option value="side_cluster">边集群</option>
            </select> -->
            <v-select
                v-model="targetCluster"
                label="目标集群"
                :items="['云集群', '边集群', '端集群']"
                class="selector"
                />
            </div>
            <div class="btns">
                <button class="confirmButton" @click="confirm" >确认</button>
                <button class="cancelButton" @click="$emit('close')" >取消</button>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
const intraDomainMigration=ref(true)
const crossDomainMigration=ref(false)
const  targetCluster=ref('')

function confirm(){
    console.log("确认提交")
}
</script>
<style>
.btns{
    margin-top:30px;
    margin-left:30px
}
.check {
    font-size:20px;
    margin-left:30px;
    margin-top:30px;
}
.dialog-body{
    margin-top:30px;
}
.dialog-header {
    display:flex;
}
.sel {
    margin-top:30px;
    margin-left:30px;
    font-size:20px;
}
.selector {
    margin-left:10px;
    width:300px
}
.dialog-overlay {
  position: absolute;
  top: 30%;
  left: 40%;
  width: 400px;
  height: 300px;
  background: white;
  display: block;
  align-items: center;
  justify-content: center;
  z-index: 1001; /* 确保背景在内容之上 */
}
.close-button {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    position:absolute;
    right:5%
} 
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  z-index: 1000; /* 确保背景在内容之上 */
}
.confirmButton {
    width: 80px; /* 宽度和高度相同 */
    height: 40px; /* 宽度和高度相同 */
    border-radius: 8px;
    background-color:#66B3FF;
}
.cancelButton {
    width: 80px; /* 宽度和高度相同 */
    height: 40px; /* 宽度和高度相同 */
    border-radius: 8px;
    background-color:white;
    margin-left:30px;
}
</style>